<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<script src="../js/jquery-2.1.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/ajax.js"></script>
		<script src="../js/admin/student-class-manager.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<style>
			body {
				padding: 20px;
				background-color: white;

			}
			#roleNameText{
				width: 150px;
				float: left;
				margin-right: 5px;
			}
		</style>
	</head>
	<body>

		<!--绑定的模态框开始-->
		<!-- Modal -->
		<div class="modal fade" id="addClazzStudentTeacherBean" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">角色绑定</h4>
					</div>
					<div class="modal-body">

						<!-- 角色绑定的表单 开始 -->
						<form class="form-horizontal">
							<div class="form-group">
								<label for="userId" class="col-sm-2 control-label">#</label>
								<div class="col-sm-10">
									<p class="form-control-static" name="userId"></p>
									<input type="hidden" name="userId" />
								</div>
							</div>
							<div class="form-group">
								<label for="userName" class="col-sm-2 control-label">用户名字</label>
								<div class="col-sm-10">
									<p class="form-control-static" name="userName"></p>
								</div>
							</div>
							<div class="form-group">
								<label for="roleName" class="col-sm-2 control-label">角色名字</label>
								<select id="classNameList" class="form-control" style="width: 150px;">
									<option>-请选择-</option>
								</select>
							</div>
						</form>
						<!-- 角色绑定的表单 结束 -->

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal" id="guanbi">关闭</button>
						<button type="button" id="modalUpdateRoleButton" class="btn btn-primary">绑定</button>
					</div>
				</div>
			</div>
		</div>
		<!--绑定的模态框结束-->

		


		<div class="container" id="main">

			<!-- 路径导航开始-->
			<div class="row">
				<div class="col-md-12">
					<ol class="breadcrumb">
						<li><a style="text-decoration: none;" href="#">班级模块</a></li>
						<li><a style="text-decoration: none;" href="#">给学生分配班级</a></li>
					</ol>
				</div>
			</div>
			<!-- 路径导航结束-->

			<!-- 按钮开始-->
			<div class="row">
				<div class="col-md-9">
					<button id="deleteButton" class="btn btn-danger">删除</button>
				</div>
			</div>
			<!-- 按钮结束-->

			<!-- 表格开始-->
			<div class="row">
				<div class="col-md-12">
					<table class="table table-hover" id="clazzStudentListTable">
						<tr>
							<th><input id="selectAllRole" type="checkbox"></th>
							<th>用户id</th>
							<th>用户名字</th>
							<th>手机号</th>
							<th>班级名称</th>
							<th>操作</th>
						</tr>
						<tr v-for="clazzStudent,index in clazzStudents">
							<td><input class="check-role" type="checkbox" v-bind:value="index" v-model="ids" ></td>
							<td>{{clazzStudent.studentId}}</td>
							<td>{{clazzStudent.studentName}}</td>
							<td>{{clazzStudent.phone}}</td>
							<td>{{clazzStudent.clazzName}}</td>
							<td>
								<button @click="tableAddButton(index)" class="btn btn-primary btn-sm">
									<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>分配
								</button>
								<!-- <button class="btn btn-danger btn-sm">
									<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
								</button> -->
							</td>

							<!--分页组件开始-->
						<tr style="background-color: white;">
							<td colspan="2">
								<span class="glyphicon glyphicon-flag"></span>
								第
								<span class="pageNumber">{{pageNumber}}</span>
								页
								&nbsp;
								<span class="glyphicon glyphicon-align-justify"></span>
								每页
								<span class="totalPage">{{pageSize}}</span>
								条
								&nbsp;
								<span class="glyphicon glyphicon-check"></span>
								总记录
								<span class="totalCounter">{{totalCounter}}</span>
								条
								&nbsp;
								<span class="glyphicon glyphicon-briefcase"></span>
								共
								<span class="totalPage">{{totalPage}}</span>
								页
							</td>
							<td colspan="4">
								<!-- 分页按钮开始 -->
								<nav aria-label="Page navigation">
									<ul class="pagination">

										<!-- 第1页 -->
										<li id="firstPage"><a href="#">&lt;&lt;</a></li>

										<!-- 上1页 -->
										<li id="prePage"><a href="#">&lt;</a></li>

										<!-- 下1页 -->
										<li id="nextPage"><a href="#">&gt;</a></li>

										<!-- 最后1页 -->
										<li id="lastPage"><a href="#">&gt;&gt;</a></li>
									</ul>
								</nav>
								<!-- 分页按钮开始 -->
							</td>
						</tr>
						<!--分页组件结束-->

					</table>
				</div>
			</div>
			<!-- 表格结束-->
		</div>
	</body>
</html>
